<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<!--
BeyondAdmin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
Version: 1.0.0
Purchase: http://wrapbootstrap.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<meta charset="utf-8" />
<title>建议反馈</title>

<meta name="description" content="Dashboard" />
<meta name="description" content="data tables" />
<meta name="description" content="Form Elements Data Pickers" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon"
	href="<%=request.getContextPath()%>/commonadmin/assets/img/favicon.png"
	type="image/x-icon">


<!--Basic Styles-->
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/bootstrap.min.css"
	rel="stylesheet" />
<link id="bootstrap-rtl-link" href="" rel="stylesheet" />
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/font-awesome.min.css"
	rel="stylesheet" />
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/weather-icons.min.css"
	rel="stylesheet" />

<!--Fonts-->
<link
	href="<%=request.getContextPath()%>/commonadmin/js/font-useso.js"
	rel="stylesheet" type="text/css">

<!--Beyond styles-->
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/beyond.min.css"
	rel="stylesheet" />
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/demo.min.css"
	rel="stylesheet" />
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/typicons.min.css"
	rel="stylesheet" />
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/animate.min.css"
	rel="stylesheet" />
<link id="skin-link" href="" rel="stylesheet" type="text/css" />

<!--Page Related styles-->
<link
	href="<%=request.getContextPath()%>/commonadmin/assets/css/dataTables.bootstrap.css"
	rel="stylesheet" />

<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script
	src="<%=request.getContextPath()%>/commonadmin/assets/js/skins.min.js"></script>
</head>
<!-- /Head -->
<!-- Body -->
<body>
	<!-- Loading Container -->
	<div class="loading-container">
		<div class="loading-progress">
			<div class="rotator">
				<div class="rotator">
					<div class="rotator colored">
						<div class="rotator">
							<div class="rotator colored">
								<div class="rotator colored"></div>
								<div class="rotator"></div>
							</div>
							<div class="rotator colored"></div>
						</div>
						<div class="rotator"></div>
					</div>
					<div class="rotator"></div>
				</div>
				<div class="rotator"></div>
			</div>
			<div class="rotator"></div>
		</div>
	</div>
	<!--  /Loading Container -->
	<!-- Navbar -->
	<%@ include file="/commonadmin/include/admin-navbar.jsp"%>
	<!-- /Navbar -->
	<!-- Main Container -->
	<div class="main-container container-fluid">
		<!-- Page Container -->
		<div class="page-container">
			<!-- Page Sidebar -->
			<%@ include file="/commonadmin/include/admin-pageSidebar.jsp"%>
			<!-- /Page Sidebar -->
			<!-- Page Content -->
			<div class="page-content">

				<!-- /Page Breadcrumb -->
				<!-- Page Header -->
				<div class="page-header position-relative">
					<div class="header-title">
						<h1>系统管理</h1>
						<i class="fa fa-angle-right"></i>建议反馈
					</div>
					<!--Header Buttons-->
					<div class="header-buttons">
						<a class="sidebar-toggler" href="#"> <i class="fa fa-arrows-h"></i>
						</a> <a class="refresh" id="refresh-toggler" href=""> <i
							class="glyphicon glyphicon-refresh"></i> </a> <a class="fullscreen"
							id="fullscreen-toggler" href="#"> <i
							class="glyphicon glyphicon-fullscreen"></i> </a>
					</div>
					<!--Header Buttons End-->
				</div>

				<!-- Page Body -->
				<div class="page-body">
					<div class="row">
						<div class="col-xs-12 col-md-12">
							<div class="widget">
								<div class="widget-header bordered-bottom bordered-yellow">
									<span class="widget-caption">建议反馈列表</span>

									<div class="widget-buttons">
										<a href="#" data-toggle="maximize"> <i
											class="fa fa-expand"></i> </a> <a href="#" data-toggle="collapse">
											<i class="fa fa-minus"></i> </a> <a href="#"
											data-toggle="dispose"> <i class="fa fa-times"></i> </a>
									</div>
								</div>

								<div class="widget-body no-padding">
									<table class="table table-bordered table-hover table-striped"
										id="searchable">
										<thead class="bordered-darkorange">
											<tr role="row">

												<th>序号</th>
												<th>建议id</th>
												<th>建议内容</th>
												<th>建议人id/用户名</th>
												<th>建议时间</th>
												<th>预约单号/预约单创建者/预约单科目</th>
												<th>订单类型</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${complainList }" var="vv" varStatus="idx">
												<tr>
													<td>${idx.count}</td>
													<td class="sorting_1 ">${vv.complain_id }</td>
													<td class=" ">${vv.complain_content}</td>
													<td class=" ">${vv.complain_user_id}/${vv.complain_username}</td>
													<td class=" ">${vv.complain_createtime }</td>	
													<td class=" ">${vv.complain_reservation_number }/id${vv.reservation_create_id }:${vv.reservation_create_user_name }/${vv.reservation_course }</td>
													<td class=" ">${vv.complain_reservation_type }</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>

								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /Page Body -->
			</div>
			<!-- /Page Content -->
		</div>
		<!-- /Page Container -->
	</div>
	<!-- Main Container -->


	<!--Basic Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/jquery-2.0.3.min.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/bootstrap.min.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/js/adminCookie.js"></script>
	<!--Beyond Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/beyond.min.js"></script>

	<!--Page Related Scripts-->
	<!--Sparkline Charts Needed Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/jquery.sparkline.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/sparkline-init.js"></script>

	<!--Easy Pie Charts Needed Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/	assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/easypiechart/easypiechart-init.js"></script>

	<!--Flot Charts Needed Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.resize.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.pie.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.tooltip.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.orderBars.js"></script>

	<!--Page Related Scripts-->
	<!--Sparkline Charts Needed Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/jquery.sparkline.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/sparkline-init.js"></script>

	<!--Easy Pie Charts Needed Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/easypiechart/easypiechart-init.js"></script>

	<!--Flot Charts Needed Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.resize.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.pie.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.tooltip.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.orderBars.js"></script>

	<!--Page Related Scripts-->
	<!--Jquery Select2-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/select2/select2.js"></script>
	<!--Bootstrap Tags Input-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/tagsinput/bootstrap-tagsinput.js"></script>
	<!--Bootstrap Date Picker-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/bootstrap-datepicker.js"></script>

	<!--Bootstrap Time Picker-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/bootstrap-timepicker.js"></script>

	<!--Bootstrap Date Range Picker-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/moment.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/daterangepicker.js"></script>

	<!--Jquery Autosize-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/textarea/jquery.autosize.js"></script>

	<!--Fuelux Spinner-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/fuelux/spinner/fuelux.spinner.min.js"></script>

	<!--jQUery MiniColors-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/colorpicker/jquery.minicolors.js"></script>

	<!--jQUery Knob-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/knob/jquery.knob.js"></script>

	<!--noUiSlider-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/slider/jquery.nouislider.js"></script>

	<!--Bootstrap Date Range Picker 范围日期选择-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/moment.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/daterangepicker.js"></script>

	<!--jQRangeSlider-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/jquery-ui-1.10.4.custom.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/slider/jQRangeSlider/jQAllRangeSliders-withRuler-min.js"></script>

	<!--Page Related Scripts-->
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/jquery.dataTables.min.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/ZeroClipboard.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/dataTables.tableTools.min.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/dataTables.bootstrap.min.js"></script>
	<script
		src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/datatables-init.js"></script>
	<script>
		InitiateSimpleDataTable.init();
		InitiateEditableDataTable.init();
		InitiateExpandableDataTable.init();
		InitiateSearchableDataTable.init();
	</script>
	<script>
		// If you want to draw your charts with Theme colors you must run initiating charts after that current skin is loaded
		$(window)
				.bind(
						"load",
						function() {

							/*Sets Themed Colors Based on Themes*/
							themeprimary = getThemeColorFromCss('themeprimary');
							themesecondary = getThemeColorFromCss('themesecondary');
							themethirdcolor = getThemeColorFromCss('themethirdcolor');
							themefourthcolor = getThemeColorFromCss('themefourthcolor');
							themefifthcolor = getThemeColorFromCss('themefifthcolor');

							//Sets The Hidden Chart Width
							$('#dashboard-bandwidth-chart').data('width',
									$('.box-tabbs').width() - 20);

							//-------------------------Visitor Sources Pie Chart----------------------------------------//
							var data = [ {
								data : [ [ 1, 21 ] ],
								color : '#fb6e52'
							}, {
								data : [ [ 1, 12 ] ],
								color : '#e75b8d'
							}, {
								data : [ [ 1, 11 ] ],
								color : '#a0d468'
							}, {
								data : [ [ 1, 10 ] ],
								color : '#ffce55'
							}, {
								data : [ [ 1, 46 ] ],
								color : '#5db2ff'
							} ];
							var placeholder = $("#dashboard-pie-chart-sources");
							placeholder.unbind();

							$.plot(placeholder, data, {
								series : {
									pie : {
										innerRadius : 0.45,
										show : true,
										stroke : {
											width : 4
										}
									}
								}
							});

							//------------------------------Visit Chart------------------------------------------------//
							var data2 = [
									{
										color : themesecondary,
										label : "Direct Visits",
										data : [ [ 3, 2 ], [ 4, 5 ], [ 5, 4 ],
												[ 6, 11 ], [ 7, 12 ],
												[ 8, 11 ], [ 9, 8 ],
												[ 10, 14 ], [ 11, 12 ],
												[ 12, 16 ], [ 13, 9 ],
												[ 14, 10 ], [ 15, 14 ],
												[ 16, 15 ], [ 17, 9 ] ],

										lines : {
											show : true,
											fill : true,
											lineWidth : .1,
											fillColor : {
												colors : [ {
													opacity : 0
												}, {
													opacity : 0.4
												} ]
											}
										},
										points : {
											show : false
										},
										shadowSize : 0
									},
									{
										color : themeprimary,
										label : "Referral Visits",
										data : [ [ 3, 10 ], [ 4, 13 ],
												[ 5, 12 ], [ 6, 16 ],
												[ 7, 19 ], [ 8, 19 ],
												[ 9, 24 ], [ 10, 19 ],
												[ 11, 18 ], [ 12, 21 ],
												[ 13, 17 ], [ 14, 14 ],
												[ 15, 12 ], [ 16, 14 ],
												[ 17, 15 ] ],
										bars : {
											order : 1,
											show : true,
											borderWidth : 0,
											barWidth : 0.4,
											lineWidth : .5,
											fillColor : {
												colors : [ {
													opacity : 0.4
												}, {
													opacity : 1
												} ]
											}
										}
									},
									{
										color : themethirdcolor,
										label : "Search Engines",
										data : [ [ 3, 14 ], [ 4, 11 ],
												[ 5, 10 ], [ 6, 9 ], [ 7, 5 ],
												[ 8, 8 ], [ 9, 5 ], [ 10, 6 ],
												[ 11, 4 ], [ 12, 7 ],
												[ 13, 4 ], [ 14, 3 ],
												[ 15, 4 ], [ 16, 6 ], [ 17, 4 ] ],
										lines : {
											show : true,
											fill : false,
											fillColor : {
												colors : [ {
													opacity : 0.3
												}, {
													opacity : 0
												} ]
											}
										},
										points : {
											show : true
										}
									} ];
							var options = {
								legend : {
									show : false
								},
								xaxis : {
									tickDecimals : 0,
									color : '#f3f3f3'
								},
								yaxis : {
									min : 0,
									color : '#f3f3f3',
									tickFormatter : function(val, axis) {
										return "";
									},
								},
								grid : {
									hoverable : true,
									clickable : false,
									borderWidth : 0,
									aboveData : false,
									color : '#fbfbfb'

								},
								tooltip : true,
								tooltipOpts : {
									defaultTheme : false,
									content : " <b>%x May</b> , <b>%s</b> : <span>%y</span>",
								}
							};
							var placeholder = $("#dashboard-chart-visits");
							var plot = $.plot(placeholder, data2, options);

							//------------------------------Real-Time Chart-------------------------------------------//
							var data = [], totalPoints = 300;

							function getRandomData() {

								if (data.length > 0)
									data = data.slice(1);

								// Do a random walk

								while (data.length < totalPoints) {

									var prev = data.length > 0 ? data[data.length - 1]
											: 50, y = prev + Math.random() * 10
											- 5;

									if (y < 0) {
										y = 0;
									} else if (y > 100) {
										y = 100;
									}

									data.push(y);
								}

								// Zip the generated y values with the x values

								var res = [];
								for ( var i = 0; i < data.length; ++i) {
									res.push([ i, data[i] ]);
								}

								return res;
							}
							// Set up the control widget
							var updateInterval = 100;
							var plot = $
									.plot("#dashboard-chart-realtime",
											[ getRandomData() ], {
												yaxis : {
													color : '#f3f3f3',
													min : 0,
													max : 100,
													tickFormatter : function(
															val, axis) {
														return "";
													}
												},
												xaxis : {
													color : '#f3f3f3',
													min : 0,
													max : 100,
													tickFormatter : function(
															val, axis) {
														return "";
													}
												},
												colors : [ themeprimary ],
												series : {
													lines : {
														lineWidth : 0,
														fill : true,
														fillColor : {
															colors : [ {
																opacity : 0.5
															}, {
																opacity : 0
															} ]
														},
														steps : false
													},
													shadowSize : 0
												},
												grid : {
													hoverable : true,
													clickable : false,
													borderWidth : 0,
													aboveData : false
												}
											});

							function update() {

								plot.setData([ getRandomData() ]);

								plot.draw();
								setTimeout(update, updateInterval);
							}
							update();

							//-------------------------Initiates Easy Pie Chart instances in page--------------------//
							InitiateEasyPieChart.init();

							//-------------------------Initiates Sparkline Chart instances in page------------------//
							InitiateSparklineCharts.init();
						});
	</script>

	<script>
		// If you want to draw your charts with Theme colors you must run initiating charts after that current skin is loaded
		$(window)
				.bind(
						"load",
						function() {

							/*Sets Themed Colors Based on Themes*/
							themeprimary = getThemeColorFromCss('themeprimary');
							themesecondary = getThemeColorFromCss('themesecondary');
							themethirdcolor = getThemeColorFromCss('themethirdcolor');
							themefourthcolor = getThemeColorFromCss('themefourthcolor');
							themefifthcolor = getThemeColorFromCss('themefifthcolor');

							//Sets The Hidden Chart Width
							$('#dashboard-bandwidth-chart').data('width',
									$('.box-tabbs').width() - 20);

							//-------------------------Visitor Sources Pie Chart----------------------------------------//
							var data = [ {
								data : [ [ 1, 21 ] ],
								color : '#fb6e52'
							}, {
								data : [ [ 1, 12 ] ],
								color : '#e75b8d'
							}, {
								data : [ [ 1, 11 ] ],
								color : '#a0d468'
							}, {
								data : [ [ 1, 10 ] ],
								color : '#ffce55'
							}, {
								data : [ [ 1, 46 ] ],
								color : '#5db2ff'
							} ];
							var placeholder = $("#dashboard-pie-chart-sources");
							placeholder.unbind();

							$.plot(placeholder, data, {
								series : {
									pie : {
										innerRadius : 0.45,
										show : true,
										stroke : {
											width : 4
										}
									}
								}
							});

							//------------------------------Visit Chart------------------------------------------------//
							var data2 = [
									{
										color : themesecondary,
										label : "Direct Visits",
										data : [ [ 3, 2 ], [ 4, 5 ], [ 5, 4 ],
												[ 6, 11 ], [ 7, 12 ],
												[ 8, 11 ], [ 9, 8 ],
												[ 10, 14 ], [ 11, 12 ],
												[ 12, 16 ], [ 13, 9 ],
												[ 14, 10 ], [ 15, 14 ],
												[ 16, 15 ], [ 17, 9 ] ],

										lines : {
											show : true,
											fill : true,
											lineWidth : .1,
											fillColor : {
												colors : [ {
													opacity : 0
												}, {
													opacity : 0.4
												} ]
											}
										},
										points : {
											show : false
										},
										shadowSize : 0
									},
									{
										color : themeprimary,
										label : "Referral Visits",
										data : [ [ 3, 10 ], [ 4, 13 ],
												[ 5, 12 ], [ 6, 16 ],
												[ 7, 19 ], [ 8, 19 ],
												[ 9, 24 ], [ 10, 19 ],
												[ 11, 18 ], [ 12, 21 ],
												[ 13, 17 ], [ 14, 14 ],
												[ 15, 12 ], [ 16, 14 ],
												[ 17, 15 ] ],
										bars : {
											order : 1,
											show : true,
											borderWidth : 0,
											barWidth : 0.4,
											lineWidth : .5,
											fillColor : {
												colors : [ {
													opacity : 0.4
												}, {
													opacity : 1
												} ]
											}
										}
									},
									{
										color : themethirdcolor,
										label : "Search Engines",
										data : [ [ 3, 14 ], [ 4, 11 ],
												[ 5, 10 ], [ 6, 9 ], [ 7, 5 ],
												[ 8, 8 ], [ 9, 5 ], [ 10, 6 ],
												[ 11, 4 ], [ 12, 7 ],
												[ 13, 4 ], [ 14, 3 ],
												[ 15, 4 ], [ 16, 6 ], [ 17, 4 ] ],
										lines : {
											show : true,
											fill : false,
											fillColor : {
												colors : [ {
													opacity : 0.3
												}, {
													opacity : 0
												} ]
											}
										},
										points : {
											show : true
										}
									} ];
							var options = {
								legend : {
									show : false
								},
								xaxis : {
									tickDecimals : 0,
									color : '#f3f3f3'
								},
								yaxis : {
									min : 0,
									color : '#f3f3f3',
									tickFormatter : function(val, axis) {
										return "";
									},
								},
								grid : {
									hoverable : true,
									clickable : false,
									borderWidth : 0,
									aboveData : false,
									color : '#fbfbfb'

								},
								tooltip : true,
								tooltipOpts : {
									defaultTheme : false,
									content : " <b>%x May</b> , <b>%s</b> : <span>%y</span>",
								}
							};
							var placeholder = $("#dashboard-chart-visits");
							var plot = $.plot(placeholder, data2, options);

							//------------------------------Real-Time Chart-------------------------------------------//
							var data = [], totalPoints = 300;

							function getRandomData() {

								if (data.length > 0)
									data = data.slice(1);

								// Do a random walk

								while (data.length < totalPoints) {

									var prev = data.length > 0 ? data[data.length - 1]
											: 50, y = prev + Math.random() * 10
											- 5;

									if (y < 0) {
										y = 0;
									} else if (y > 100) {
										y = 100;
									}

									data.push(y);
								}

								// Zip the generated y values with the x values

								var res = [];
								for ( var i = 0; i < data.length; ++i) {
									res.push([ i, data[i] ]);
								}

								return res;
							}
							// Set up the control widget
							var updateInterval = 100;
							var plot = $
									.plot("#dashboard-chart-realtime",
											[ getRandomData() ], {
												yaxis : {
													color : '#f3f3f3',
													min : 0,
													max : 100,
													tickFormatter : function(
															val, axis) {
														return "";
													}
												},
												xaxis : {
													color : '#f3f3f3',
													min : 0,
													max : 100,
													tickFormatter : function(
															val, axis) {
														return "";
													}
												},
												colors : [ themeprimary ],
												series : {
													lines : {
														lineWidth : 0,
														fill : true,
														fillColor : {
															colors : [ {
																opacity : 0.5
															}, {
																opacity : 0
															} ]
														},
														steps : false
													},
													shadowSize : 0
												},
												grid : {
													hoverable : true,
													clickable : false,
													borderWidth : 0,
													aboveData : false
												}
											});

							function update() {

								plot.setData([ getRandomData() ]);

								plot.draw();
								setTimeout(update, updateInterval);
							}
							update();

							//-------------------------Initiates Easy Pie Chart instances in page--------------------//
							InitiateEasyPieChart.init();

							//-------------------------Initiates Sparkline Chart instances in page------------------//
							InitiateSparklineCharts.init();
						});
	</script>
	<script>

		//date
		//--Jquery Select2--
		$("#e1").select2();
		$("#e2").select2({
			placeholder : "Select a State",
			allowClear : true
		});

		//--Bootstrap Date Picker--
		$('.date-picker').datepicker();

		//--Bootstrap Time Picker--
		$('#timepicker1').timepicker();

		//--Bootstrap Date Range Picker--
		$('#reservation').daterangepicker();

		//--JQuery Autosize--
		$('#textareaanimated').autosize({
			append : "\n"
		});

		//--Fuelux Spinner--
		$('.spinner').spinner();

		//--jQuery MiniColors--
		$('.colorpicker').each(function() {
			$(this).minicolors({
				control : $(this).attr('data-control') || 'hue',
				defaultValue : $(this).attr('data-defaultValue') || '',
				inline : $(this).attr('data-inline') === 'true',
				letterCase : $(this).attr('data-letterCase') || 'lowercase',
				opacity : $(this).attr('data-opacity'),
				position : $(this).attr('data-position') || 'bottom left',
				change : function(hex, opacity) {
					if (!hex)
						return;
					if (opacity)
						hex += ', ' + opacity;
					try {
						console.log(hex);
					} catch (e) {
					}
				},
				theme : 'bootstrap'
			});

		});

		//---Jquery Knob--
		$(".knob").knob();

		//---noUiSlider--
		$("#sample-minimal").noUiSlider(
				{
					range : [ 0, 100 ],
					start : [ 20, 80 ],
					connect : true,
					serialization : {
						mark : ',',
						resolution : 0.1,
						to : [ [ $("#minimal-label1"), 'html' ],
								[ $('#minimal-label2'), 'html' ] ]
					}
				});

		$("#sample-onehandle").noUiSlider({
			range : [ 20, 100 ],
			start : 40,
			step : 20,
			handles : 1,
			connect : "lower",
			serialization : {
				to : [ $("#low"), 'html' ]
			}
		});
		$("#sample-onehandle-upper").noUiSlider({
			range : [ 20, 100 ],
			start : 70,
			step : 20,
			handles : 1,
			connect : "upper",
			serialization : {
				to : [ $("#low"), 'html' ]
			}
		});
		$('.slider').noUiSlider(
				{
					range : [ 0, 255 ],
					start : 127,
					handles : 1,
					connect : "lower",
					orientation : "vertical",
					serialization : {
						resolution : 1
					},
					slide : function() {

						var color = 'rgb(' + $("#red").val() + ','
								+ $("#green").val() + ',' + $("#blue").val()
								+ ')';

						$(".result").css({
							background : color,
							color : color
						});
					}
				});

		$(".sized-slider").noUiSlider({
			range : [ 0, 100 ],
			start : 50,
			handles : 1,
			connect : "lower",
			serialization : {
				to : [ $("#low"), 'html' ]
			}
		});

		$(".colored-slider").noUiSlider({
			range : [ 0, 100 ],
			start : 30,
			handles : 1,
			connect : "lower",
			serialization : {
				to : [ $("#low"), 'html' ]
			}
		});

		//--jQRangeSlider--
		$(".sized-rangeslider").rangeSlider();
		$(".colored-rangeslider").rangeSlider();
		$("#rangeslider").rangeSlider();
		$("#editrangeslider").editRangeSlider();
		$("#daterangeslider").dateRangeSlider();
		$("#noarrowsrangeslider").rangeSlider({
			arrows : false
		});
		$("#boundsrangeslider").rangeSlider({
			bounds : {
				min : 10,
				max : 90
			}
		});
		$("#dvrangeslider").rangeSlider({
			defaultValues : {
				min : 13,
				max : 66
			}
		});
		$("#delayrangeslider").rangeSlider({
			valueLabels : "change",
			delayOut : 4000
		});
		$("#durationrangeslider").rangeSlider({
			valueLabels : "change",
			durationIn : 1000,
			durationOut : 1000
		});
		$("#disabledrangeslider").rangeSlider({
			enabled : false
		});
		$("#steprangeslider").rangeSlider({
			step : 10
		});
		$("#labelsrangeslider").rangeSlider({
			valueLabels : "hide"
		});
		$("#simlescalesrangeslider").rangeSlider({
			scales : [
			// Primary scale
			{
				first : function(val) {
					return val;
				},
				next : function(val) {
					return val + 10;
				},
				stop : function(val) {
					return false;
				},
				label : function(val) {
					return val;
				},
				format : function(tickContainer, tickStart, tickEnd) {
					tickContainer.addClass("myCustomClass");
				}
			},
			// Secondary scale
			{
				first : function(val) {
					return val;
				},
				next : function(val) {
					if (val % 10 === 9) {
						return val + 2;
					}
					return val + 1;
				},
				stop : function(val) {
					return false;
				},
				label : function() {
					return null;
				}
			} ]
		});
		var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
				"Sept", "Oct", "Nov", "Dec" ];
		$("#dateRulersExample").dateRangeSlider({
			bounds : {
				min : new Date(2012, 0, 1),
				max : new Date(2012, 11, 31, 12, 59, 59)
			},
			defaultValues : {
				min : new Date(2012, 1, 10),
				max : new Date(2012, 4, 22)
			},
			scales : [ {
				first : function(value) {
					return value;
				},
				end : function(value) {
					return value;
				},
				next : function(value) {
					var next = new Date(value);
					return new Date(next.setMonth(value.getMonth() + 1));
				},
				label : function(value) {
					return months[value.getMonth()];
				},
				format : function(tickContainer, tickStart, tickEnd) {
					tickContainer.addClass("myCustomClass");
				}
			} ]
		});
	</script>
</body>
<!--  /Body -->
</html>
